// pages/home-music/index.js
import { rankingStore, rankingMap, playerStore } from '../../store/index'
import { getSwiperPic, getSongMenu } from '../../service/api_music'
import selectRect from '../../utils/select-rect'
import throttle from '../../utils/throttle'

const aa = throttle(selectRect, 500)

Page({
	/**
	 * 页面的初始数据
	 */
	data: {
		swiperPic: [],
		swiperHeight: 0,
		hotSongMenu: [],
		recommendSongMenu: [],
		recommendSongs: [],
		rankings: { 0: {}, 2: {}, 3: {} },

		currentSong: {},
		isPlaying: false,
		playAnimState: 'paused'
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
		// playerStore.dispatch("playMusicWithSongIdAction", {id: 1807799505})

		// 获取页面数据
		this.getPageData()

		// 发起共享数据的请求
		rankingStore.dispatch('getRankingDataAction')

		this.setupPlayerStoreListrner()
	},

	toDetailSearch() {
		wx.navigateTo({
			url: '/pages/detail-search/index'
		})
	},

	// 网络请求
	getPageData: function () {
		getSwiperPic().then(res => {
			this.setData({ swiperPic: res.banners })
		})

		getSongMenu().then(res => {
			this.setData({ hotSongMenu: res.playlists })
		})

		getSongMenu('华语').then(res => {
			this.setData({ recommendSongMenu: res.playlists })
		})
	},

	// 图片加载完成,获取轮播图片的高度
	handleSwiperPicLoaded() {
		aa('.swiper-image').then(res => {
			this.setData({ swiperHeight: res.height })
		})
	},

	getRankingHandler: function (idx) {
		return res => {
			if (Object.keys(res).length === 0) return
			// console.log("idx:", idx)
			const name = res.name
			const coverImgUrl = res.coverImgUrl
			const playCount = res.playCount
			const songList = res.tracks.slice(0, 3)
			const rankingObj = { name, coverImgUrl, playCount, songList }
			const newRankings = { ...this.data.rankings, [idx]: rankingObj }
			this.setData({
				rankings: newRankings
			})
			// console.log(this.data.rankings)
		}
	},

	// 点击歌曲推荐的更多
	hendleMoreSong() {
		const rankingName = 'hotRanking'
		this.handleRankingTo(rankingName)
	},

	// 点击榜单
	handleRankingItemClick(event) {
		const idx = event.currentTarget.dataset.idx
		const rankingName = rankingMap[idx]
		this.handleRankingTo(rankingName)
	},

	handleRankingTo(rankingName) {
		wx.navigateTo({
			url: `/pages/song-ranking/index?ranking=${rankingName}&type=rank`
		})
	},

	// 点击热门歌曲
	handleSongItemClick(event) {
		const index = event.currentTarget.dataset.index
		playerStore.setState('platSongList', recommendSongs)
		playerStore.setState('playSongIndex', index)
	},

	handlePlayBtnClick() {
		playerStore.dispatch('changeMusicPlayStatusAction', !this.data.isPlaying)
	},

	// 数据监听
	setupPlayerStoreListrner() {
		// 排行榜数据监听
		rankingStore.onState('hotRanking', res => {
			if (!res.tracks) return
			const recommendSongs = res.tracks.slice(0, 6)
			this.setData({ recommendSongs })
		})
		rankingStore.onState('newRanking', this.getRankingHandler(0))
		rankingStore.onState('originRanking', this.getRankingHandler(2))
		rankingStore.onState('upRanking', this.getRankingHandler(3))

		// 播放工具栏数据监听
		playerStore.onStates(['currentSong', 'isPlaying'], ({ currentSong, isPlaying }) => {
			if (currentSong) this.setData({ currentSong })
			if (isPlaying !== undefined)
				this.setData({
					isPlaying,
					playAnimState: isPlaying ? 'running' : 'paused'
				})
		})
	}
})
